<template>
  <div class="table-bg">
    <el-table
      :data="turnoverList"
      :header-cell-style="{ color: 'rgba(255, 255, 255, 0.4)' }"
      stripe
      size="mini"
      style="width: 100%; padding-top: 4px;"
      :height="tableHeight">
      <el-table-column prop="realname" label="姓名"></el-table-column>
      <el-table-column prop="username" label="ID"></el-table-column>
      <el-table-column prop="registerdate" label="出入时间" width="170"></el-table-column>
      <el-table-column label="出入口">
        <template slot-scope="scope">
          <span v-if="scope.row.inouttype == 1"><span class="circle entrance-status" />入口</span>
          <span v-if="scope.row.inouttype == 2"><span class="circle exit-status" />出口</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";
import PublicMethods from "../../../util/PublicMethods";

export default {
  components: {},
  data() {
    return {
      turnoverList: [],
      tableHeight: "140",
    };
  },

  created() {
    this.getItemHeight();
  },

  mounted() {
    let flag = null;
    let _this = this;
    window.onresize = function () {
      flag && clearTimeout(flag);
      flag = setTimeout(() => {
        _this.getItemHeight();
        flag = null;
      }, 200)
    }
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
    getItemHeight() {
      this.$nextTick(() => {
        let h = document.getElementsByClassName("table-bg")[1];
        this.tableHeight = h.offsetHeight - 1;
      })
    },

    // 获取出入记录数据
    getInAndOutList(bidSection) {
      let time = PublicMethods.formatDate(Date.now(), 'yyyy-mm-dd');
      let params = {
        pageNum: 1,
        pageSize: 2000,
        bidSection: bidSection,
        starttime: time + " 00:00:00",
        endtime: time + " 23:59:59"
      };
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYLOG_LIST, params, (res) => {
        let { data } = res.data;
        this.turnoverList = data;
      }, null);
    },
  }
};
</script>

<style scoped>
  .table-bg{
    width: 100%;
    height: 100%;
  }

  .el-table{
    background: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0.8);
  }

  .el-table >>> tr th{
    background: transparent;
    border: none;
  }

  .table-bg >>> .el-table tr,
  .el-table >>> thead{
    background-color: rgba(255, 255, 255, 0);
  }

  .el-table >>> td,
  .el-table >>> th.is-leaf{
    border: none !important;
  }

  .el-table >>> td .circle {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 4px;
  }

  .el-table >>> td .entrance-status{
    background: #5d9cfd;
  }

  .el-table >>> td .exit-status{
    background: #ff6666;
  }

  .el-table::before {
    background-color: rgba(255, 255, 255, 0);
  }


  .el-table--scrollable-y >>> .el-table__body-wrapper::-webkit-scrollbar{
    background-color: rgba(255, 255, 255, 0.02);
    width: .3rem;
  }

  .el-table--scrollable-y >>> .el-table__body-wrapper::-webkit-scrollbar-thumb{
    width: .2rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
  }

  .el-table--scrollable-x >>> .el-table__body-wrapper {
    overflow-x: hidden;
  }

  .el-table >>> .el-table__body,
  .el-table >>> .el-table__header,
  .el-table >>> .is-scrolling-left .el-table__empty-block {
    width: auto !important;
  }

  /*隔行颜色*/
  .el-table--striped >>> .el-table__body tr.el-table__row--striped td{
    background: rgb(21 69 127);
  }

  /*hover颜色*/
  .el-table--enable-row-hover >>> .el-table__body tr:hover>td{
    background: rgb(46 160 255);
  }
</style>
